<template>
  <el-aside
    v-if="!navTabs.state.tabFullScreen"
    :class="
      'layout-aside-' +
      config.layout.layoutMode +
      ' ' +
      (config.layout.shrink ? 'shrink' : '')
    "
  >
    <!-- menuShowTopBar是否显示菜单栏顶栏LOGO 默认为true-->
    <Logo v-if="config.layout.menuShowTopBar" />
    <MenuVertical />
  </el-aside>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import Logo from "./logo.vue";
import MenuVertical from "./menuVertical.vue";
import { useConfig } from "@/store/config"; //后台布局相关仓库
import { useNavTabs } from "@/store/navTabs"; //后台路由相关仓库

const config = useConfig();
const navTabs = useNavTabs();

/**
 * menuWidth为侧边栏的默认宽度260px
 * menuWidth()方法 来决定菜单是否折叠
 * menuWidth与scss通过v-bind绑定
 */
const menuWidth = computed(() => config.menuWidth());
</script>
<style lang="scss" scoped>
.layout-aside-Default {
  background: var(--ba-bg-color-overlay);
  margin: 16px 0 16px 16px;
  height: calc(100vh - 32px);
  box-shadow: var(--el-box-shadow-light);
  border-radius: var(--el-border-radius-base);
  overflow: hidden;
  transition: width 0.3s ease;
  width: v-bind(menuWidth);
}
.layout-aside-Classic {
  background: var(--ba-bg-color-overlay);
  margin: 0;
  height: 100vh;
  overflow: hidden;
  transition: width 0.3s ease;
  width: v-bind(menuWidth);
}
.shrink {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
}
</style>
